<template>
  <div class="home">
      
      <mt-swipe :auto="4000" class="swiper">
        <mt-swipe-item v-for="item in banner" :key="item.imgUrl">
            <a :href="item.link"><img :src="item.imgUrl"></a>
        </mt-swipe-item>
      </mt-swipe>

      <div class="list">
         <mt-cell class='song-cell' 
            :key="item.hash" v-for="item in list" :title="item.title"  is-link></mt-cell>
      </div>

  </div>
</template>

<script>
import { getNewSongs } from '@/severs'
import { Swipe, SwipeItem,  Cell } from 'mint-ui'


export default {
  name: 'home',
  data () {
    return {
      banner: [],
      list: []
    }
  },
  components: {
    mtSwipe: Swipe,
    mtSwipeItem: SwipeItem,
    mtCell: Cell
  },
  async created(){
       let {data} = await getNewSongs();
       this.banner = data.banner.map( item => {
          return {
             imgUrl: item.imgurl,
             link: item.extra.tourl
          }
       })
      this.list = data.data.map( item=>{
          return {
            title: item.filename,
            hash: item.hash
          }
      }) 
  }

}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  .home { padding-top:7rem;}
  .swiper { 
     height: 9rem;
     margin-top:.5rem;
     img { width: 100%;}
  }

  .list {
     padding: 0 10px;
     .mint-cell-title { line-height: 1.6em; padding: 10px 0;}
  }
</style>
